<script setup>
import { RouterView } from 'vue-router'
import Header from '@/layout/Header.vue'
import Footer from '@/layout/Footer.vue'
import Sidebar from '@/layout/Sidebar.vue'
</script>

<template>
  <div class="app-container">
    <Header />
    <div class="main-container">
      <Sidebar />
      <main class="content">
        <RouterView />
      </main>
    </div>
    <!-- <Footer /> -->
  </div>
</template>

<style>
/* 圣杯布局样式 */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.main-container {
  display: flex;
  flex: 1;
  min-height: 0;
}

.content {
  flex: 1;
  padding: 20px;
  overflow: auto;
  order: 2; /* 确保内容区域在右侧 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  
  .content {
    order: 1; /* 移动端时内容在上方 */
  }
}
</style>